/*
* MinIO Cloud Storage (C) 2018 MinIO, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from "react";
import { createStyles, withStyles, Theme } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import Button from "@material-ui/core/Button";
import CloseIcon from '@material-ui/icons/Close';
import { AlertsUrl } from "./types";
const styles = (theme: Theme) =>
  createStyles({
    alerts: {
      position: 'relative',
      margin: "60px 5%",
      width: "90%",
      minHeight: 500,
      padding: 0,
      backgroundColor: "#ffffff",
      borderRadius: "5px",
      boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
      outline: "none",
      overflow: "hidden",
    },
    alertsBtn: {
      marginRight: 12,
      border: "1px solid #002a37",
    },
    frame: {
      marginTop: -75,
      width: '100%',
      minHeight: 575,
      borderRadius: "5px",
      border: "none",
    },
    btnDiv: {
      position: "absolute",
      display:"flex",
      alignItems: "center",
      justifyContent: "space-between",
      width: '100%',
      height: 46,
      backgroundColor: "#fff",
      closeBtn: {
        display: "inline-block",
        margin: "5px",
        minWidth: "36px !important",
        height: "36px",
        borderRadius: "50% 50%",
      },
      "& span": {
        marginLeft: "15px",
        color: "#002a37",
        fontSize: "1.2rem",
      },
    },
  });
  interface AlertsDrops {
    classes: any;
  }
export class Alerts extends React.Component<AlertsDrops, any, any> {
  constructor(props:any){
    super(props);
    this.state = {
      open: false
    };
  };
  setOpen(a:boolean){
    this.setState({
      open: a
    })
  }
  // receiveMessageFromIframe ( event:any ) {
  //   if (!event.data.startsWith('setImmediate')){
  //     console.log("parent received", event.data);
  //   }
  // }
  // componentDidMount(): void {
  //   window.addEventListener("message", this.receiveMessageFromIframe, false);
  //   var frame = this.refs.myFrame;
    // frame.style.display='none'
    // console.log(frame);
  // }
  // componentDidUpdate(): void {
  //   var frame = this.refs.myFrame;
    // console.log(frame);
    // if (frame.attachEvent){
    //   frame.attachEvent("onload", function(){
    //       alert("Local iframe is now loaded.");
    //   });
  // }
  render() {
    const { classes } = this.props;
    var handleOpen = () => {
      var frame = this.refs.myFrame;
      // console.log(frame);
      this.setOpen(true);
    };
    var handleClose = () => {
      this.setOpen(false);
    };
    return (
      <div style={{position: "relative"}}>
        <Button type="button" color="primary" onClick={handleOpen} className={classes.alertsBtn}>
            告警
          </Button>
          <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={this.state.open}
            onClose={handleClose}
            closeAfterTransition
          >
            <Fade in={this.state.open}>
              <div className={classes.alerts}>
                <div className={classes.btnDiv}>
                  <span>告警</span>
                  <Button type="button" color="primary" onClick={handleClose} className={classes.closeBtn}>
                    <CloseIcon/>
                  </Button>
                </div>
                <iframe id="myFrame" ref="myFrame" src={AlertsUrl} className={classes.frame}></iframe>
              </div>
            </Fade>
          </Modal>
      </div>
    );
  }
};
export default withStyles(styles)(Alerts)